<template>
  <div>
    <el-dialog
      v-model="isShapeSettingShow"
      :title="$demoi18n('shapeSetting.dialogTitle')"
      width="380px"
      top="8.4vh"
      append-to-body
      destroy-on-close
      :close-on-click-modal="false"
      :class="`${customClass} ${visualThemeClassName} ${xvueNameSpace}`"
    >
      <div class="shape-setting-main">
        <el-form
          ref="form"
          class="shape-form"
          label-position="right"
          :model="shapeForm"
          label-width="85px"
        >
          <ShapeSetting
            ref="shapeSetting"
            :form="form"
            :shape-form="shapeForm"
            :shape-data="'shapeData'"
            :config="config"
            :active-color-radio="activeColorRadio"
            :name-list="nameList"
          />
        </el-form>
        <div class="action-button-group">
          <el-button
            class="button-sure"
            size="small"
            type="primary"
            @click="handleSave()"
          >
            {{ $demoi18n('btn.confirm') }}
          </el-button>
          <el-button
            class="button-cancel"
            size="small"
            @click="cancel()"
          >
            {{ $demoi18n('btn.close') }}
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ShapeSetting from '@/components/common/shape-setting/shape-setting';

export default {
  name: 'ThresholdSetting',
  components: { ShapeSetting },
  props: ['form', 'config', 'activeColorRadio', 'nameList'],
  emits: ['save'],
  data() {
    return {
      xvueNameSpace: process.env.xvueNameSpace, // 给挂载在body下的元素加上主类名
      customClass: `shape-setting-dialog shape-setting-dialog-${window._adoPremise.uc.theme || 'light'}`,
      isShapeSettingShow: false,
      shapeForm: {},
      stringDataOption: [],
      predefineColors: ['#ff5071'],
    };
  },
  computed: {
    thisComp() {
      return this;
    },
  },
  watch: {},
  methods: {
    openDialog() {
      this.shapeForm = JSON.parse(JSON.stringify(this.form));
      this.isShapeSettingShow = true;
    },
    cancel() {
      this.isShapeSettingShow = false;
    },
    handleSave() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return;
        }
        if (!this.$refs.shapeSetting.checkValue()) {
          return;
        }
        this.$emit('save', this.shapeForm);
        this.cancel();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.shape-setting-dialog {
  .shape-setting-main {
    .shape-form {
      width: 100%;
      :deep(.el-form-item) {
        margin-bottom: 0;
      }
    }
  }

  .action-button-group {
    text-align: right;
    padding-top: 20px;
    .button-sure {
      padding: 9px 35px;
      border-radius: 0;
    }
    .button-cancel {
      padding: 9px 35px;
      border-radius: 0;
    }
  }
}
.icon-library-dialog-dark {
  .icon-library-main {
    background-color: #071f30;
  }
  .action-button-group {
    .button-sure {
      background-color: #0eb4c2;
      color: #fff;
    }
    .button-cancel {
      background-color: #064559;
      border-color: #064559;

      color: #fff;
    }
  }
}
</style>

<style lang="less">
@font_color_dark: #98cae6;
@borderColor_dark: #116584;
@textColor_dark: #ffffff;
@bgColor_dark: #000c17;
@font_color_active_dark: #00f0ff;
@background_color_dark: #071f30;
.shape-setting-dialog-dark {
  .el-dialog__header {
    background: #183c5a;
    .el-dialog__title {
      color: #fff;
    }

    .el-dialog__headerbtn {
      .el-dialog__close {
        color: #fff;
      }
    }
  }

  .el-dialog__body {
    background: #0e2b40;

    .inner {
      .help_info {
        border-color: @borderColor_dark;
        background-color: #122b40;

        table {
          tr {
            th {
              background-color: #122b40;
              border-color: #122b40;
              color: #00f0ff;
            }
            td {
              background-color: #122b40;
              border-color: #122b40;
              color: #98cae6;
            }
          }
        }
      }

      .el-textarea {
        textarea {
          background-color: rgba(53, 83, 107, 0.7);
          border-color: @borderColor_dark;
          color: #fff;
        }
      }

      .rich_table {
        tr {
          th {
            background-color: #122b40;
            border-color: @borderColor_dark;
            color: #00f0ff;
          }
          td {
            background-color: #122b40;
            border-color: @borderColor_dark;
            color: #98cae6;
          }
        }

        .el-color-picker {
          .el-color-picker__trigger {
            border-color: @borderColor_dark;
          }
        }

        .input-number {
          .el-input-number__decrease {
            background-color: #000c17;
            border-color: #116584;
            color: #116584;
          }

          .el-input-number__increase {
            background-color: #000c17;
            border-color: #116584;
            color: #116584;
          }
        }

        .el-input {
          .el-input__inner {
            border-color: @borderColor_dark;
            color: @textColor_dark;
            background-color: @bgColor_dark;
          }

          .el-input__icon {
            color: @borderColor_dark;
          }
        }

        .el-switch__core {
          background-color: #064559;
          border-color: #064559;
        }

        .el-switch.is-checked {
          .el-switch__core {
            background-color: #0eb4c2;
            border-color: #0eb4c2;
          }
        }
      }
    }

    .el-form-item__label {
      color: @font_color_dark;
    }

    .el-radio-group {
      .el-radio {
        color: @textColor_dark;

        .el-radio__input {
          .el-radio__inner {
            border-color: @font_color_active_dark;
            background-color: unset;
          }
        }

        .is-checked {
          .el-radio__inner {
            &::after {
              background-color: @font_color_active_dark;
            }
          }
        }

        .el-radio__label {
          color: #fff;
        }
      }
      .is-checked {
        .el-radio__label {
          color: #00f0ff;
        }
      }
    }

    // 表格
    .config-panel-table {
      color: @font_color_dark;
      background-color: @background_color_dark;

      &::before {
        background-color: @background_color_dark;
      }

      .cell {
        padding: 0 3px !important;
      }
      td,
      th {
        padding: 5px 0 !important;
      }

      .el-table__header {
        th {
          background-color: #122b40 !important;
          border-color: #122b40;
          color: @font_color_dark;
        }
      }

      .el-table__body {
        tr {
          td {
            background-color: @background_color_dark;
            border-color: @background_color_dark;

            .icon-library-open {
              background-color: unset;
              border-color: #0eb4c2;
            }
          }
        }

        .el-input {
          .el-input__inner {
            border-color: @borderColor_dark;
            color: @textColor_dark;
            background-color: @bgColor_dark;
          }

          .el-input__icon {
            color: @borderColor_dark;
          }
        }
      }

      .el-table__empty-block {
        background-color: #093758;

        .el-table__empty-text {
          color: @font_color_active_dark;
        }
      }
    }

    .button-sure {
      background-color: #0eb4c2;
      border-color: #0eb4c2;
      color: #fff;

      .el-icon-circle-plus {
        color: #fff;
      }
    }

    .button-cancel {
      background-color: #064559;
      border-color: #064559;
      color: #fff;

      .el-icon-circle-plus {
        color: #fff;
      }
    }
  }
}
</style>
